import React, { Component } from 'react'
import './index.scss'
import axios from 'axios'
import { Carousel } from 'antd-mobile'
import nav1 from '../../assets/images/nav-1.png'
import nav2 from '../../assets/images/nav-2.png'
import nav3 from '../../assets/images/nav-3.png'
import nav4 from '../../assets/images/nav-4.png'
import {getLocalCity as utilsGetLocalCity} from '../../utils/localCity'
import HomeHeader from '../../components/homeHeader'

export default class Index extends Component {
  state = {
    swiperList: [],
    groupList: [],
    newsList: [],
    cityName: '北京'
  }

  navs = [{
    id: 0,
    img: nav1,
    title: '整租',
    path: '/home/houseList'
  }, {
    id: 1,
    img: nav2,
    title: '合租',
    path: '/home/houseList'
  }, {
    id: 2,
    img: nav3,
    title: '地图找房',
    path: '/home/map'
  }, {
    id: 3,
    img: nav4,
    title: '去出租',
    path: '/home/houseList'
  }]

  componentDidMount() {
    this.getSwiperList()
    this.getGroupList()
    this.getNewsList()
    this.getLocalCity()
  }

  getLocalCity = async () => {
    const {label: cityName} = await utilsGetLocalCity()
    this.setState({
      cityName
    })
  }

  getSwiperList = async () => {
    const { data } = await axios.get(`http://127.0.0.1:8080/home/swiper`)

    if (data.status !== 200) {
      return alert(data.description)
    }

    this.setState({
      swiperList: data.body
    })
  }

  getGroupList = async () => {
    const { data } = await axios.get(`http://127.0.0.1:8080/home/groups?area=AREA%7C88cff55c-aaa4-e2e0`)

    if (data.status !== 200) {
      return alert(data.description)
    }

    this.setState({
      groupList: data.body
    })
  }

  getNewsList = async () => {
    const { data } = await axios.get(`http://127.0.0.1:8080/home/news?area=AREA%7C88cff55c-aaa4-e2e0`)

    if (data.status !== 200) {
      return alert(data.description)
    }

    this.setState({
      newsList: data.body
    })
  }

  renderSwiper() {
    if (!this.state.swiperList.length) {
      return <div className="swiper-empty"></div>
    }

    return <div className="search-pos">
      <Carousel
        autoplay={true}
        infinite
        autoplayInterval={3000}
      >
        {this.state.swiperList.map(val => (
          <a
            key={val.id}
            href="http://www.itcast.com"
            style={{ display: 'inline-block', width: '100%', height: 212 }}
          >
            <img
              src={`http://127.0.0.1:8080${val.imgSrc}`}
              alt=""
              style={{ width: '100%', verticalAlign: 'top' }}
              onLoad={() => {
                window.dispatchEvent(new Event('resize'));
                this.setState({ imgHeight: 'auto' });
              }}
            />
          </a>
        ))}
      </Carousel>
      <HomeHeader localCity={this.state.cityName} className="index-position"/>
    </div>
  }

  renderNav() {
    return (<div className="nav">
      {this.navs.map(item => (<div className="nav-item" key={item.id} onClick={() => this.props.history.push(item.path)}>
        <img src={item.img} alt="" />
        <div className="nav-title">{item.title}</div>
      </div>))}
    </div>)
  }

  renderGroup() {
    return (<div className="group-box">
      <div className="title-more">
        <h5>租房小组</h5>
        <span>更多</span>
      </div>
      <div className="group-list">
        {this.state.groupList.map(item => {
          return (
            <div className="group-item" key={item.id}>
              <div className="group-item-left">
                <h5>{item.title}</h5>
                <p>{item.desc}</p>
              </div>
              <img className="group-item-right" src={`http://127.0.0.1:8080${item.imgSrc}`} alt="" />
            </div>
          )
        })}
      </div>
    </div>)
  }

  renderNews() {
    return (<div className="news-box">
      <h5 className="news-title">
        新闻资讯
      </h5>
      {this.state.newsList.map(item => {
        return (
          <div className="news-item" key={item.id}>
            <img className="news-item-left" src={`http://127.0.0.1:8080${item.imgSrc}`} alt="" />
            <div className="news-item-right">
              <h5>{item.title}</h5>
              <div className="date-from">
                <span>{item.date}</span>
                <span>{item.from}</span>
              </div>
            </div>
          </div>
        )
      })}
    </div>)
  }

  render() {
    return (
      <div className="index">
        {this.renderSwiper()}

        {this.renderNav()}

        {this.renderGroup()}

        {this.renderNews()}
      </div>
    )
  }
}
